<!--
  Author: 善良的YWJ
  Created by shanliangdeYWJ on 2020/09/09
  File: 05.3解决异步设置值每个组件都是独立的.html
  Description: "
  
   请输入文件描述内容
  
               " 
  Github: https://github.com/shanliangdeYWJ
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <title>index</title>
  <style>
    #r1 {
      /* 动画名 | 持续时间 | 持续时间分布函数 ease默认 | 延迟几秒后加载 | 持续几次 | <顺序执行| 对称执行(放大后反向播放)> | 不播放时候的样子*/
      animation: animate 1s ease 0s infinite alternate;
    }

    @keyframes animate {
      0% {
        transform: scale(1);
      }

      100% {
        transform: scale(1.1);
        x: 50;
        fill: #ff0000;
      }
    }

    body {
      padding: 1em;
      background: #2B3134;
      color: #777;
      text-align: center;
      font-family: "Gill sans", sans-serif;
      width: 80%;
      margin: 0 auto;
    }

    p {
      font-style: italic;
    }

    .loader {
      height: 100px;
      width: 20%;
      text-align: center;
      padding: 1em;
      margin: 0 auto 1em;
      display: inline-block;
      vertical-align: top;
    }

    /*
  Set the color of the icon
*/
    svg path,
    svg rect {
      fill: #FF6700;
    }
  </style>
</head>

<body>
  <img src="./resource/test.svg"></img>
  <svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background: white" viewBox="0 0 100 100">
    <rect id="r1" x="0" y="0" width="20" height="10" />
  </svg>
  <!-- 插入SVG文档 -->
  <!-- 对于 IE9 以下的需要安装  pluginspage="http://www.adobe.com/svg/viewer/install/" 插件 -->
  <embed id="id1" pluginspage="http://www.adobe.com/svg/viewer/install/" src="./resource/loading1.svg" type="image/svg+xml">
</body>

</html>